<template>
    <!-- 搜索工作栏 -->
    <div class="header projectTypeList-yunying">
      <div class="search-tools">
        <SearchBar
          ref="formParams"
          :search-config="searchConfig"
          label-width="100px"
          label-position="right"
          style="margin: 0 0 15px 0"
          @transferSearchParams="transferSearchParams"
          @search="handleSearch"
          @resetSearch="resetSearch"
        >
          <el-button slot="inner" size="small" type="primary" @click="handleAdd">新建</el-button>
          <el-button slot="inner" size="small" type="primary" @click="handleSort">排序</el-button>
        </SearchBar>
      </div>
  
      <Table
        ref="tableList"
        :table-config="resultClassifiyConfig"
        :table-data="tableData"
        :total="total"
        :page-no="pageNo"
        :page-size="pageSize"
        @sortChange="sortChange"
        @handleSelectionChange="handleSelectionChange"
        @handleChangePage="handleChangePage"
      >
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="scope">
            <div class="btn-box">
              <span v-if="scope.row.status === 1" class="btns" @click="handleOperatePush(scope.row, 0)">下架</span>
              <span v-if="scope.row.status === 0" class="btns" @click="handleOperatePush(scope.row, 1)">上架</span>
              <span class="btns" @click="handleEdit(scope.row)">编辑</span>
              <span class="btns delete" @click="handleDelete(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </Table>
      <ViewNews ref="viewNews" />
      <DragSort ref="dragSort" @success="getList" />
      <addTypePop ref="addTypePop" :no-delete-types="noDeleteTypes" @success="getList" />
    </div>
  </template>
  <script>
  import { getMsgTypeList, deleteMsg, updateType } from '@/api/inner-msg/index.js'
  import { middleSearchConfig, resultClassifiyConfig } from './initData';
  import { getTableList, deleteAPI, editAPI } from './api.js';
  import SearchBar from '@/views/components/SearchBar'
  import Table from '@/views/components/Table'
  import ViewNews from './components/viewNews.vue'
  import { formatDate } from '@/utils/index.js'
  import DragSort from './components/dragSort.vue'
  import addTypePop from './components/addTypePop.vue'
  
  export default {
    name: 'NewsList',
    components: {
      SearchBar,
      Table,
      ViewNews,
      DragSort,
      addTypePop
    },
    data() {
      return {
        searchConfig: middleSearchConfig,
        resultClassifiyConfig,
        tableData: [],
        total: 0,
        pageNo: 1,
        pageSize: 10,
        tableSelectList: [],
        sortable: null,
        searchParams: {},
        sortingFields: null,
        noDeleteTypes: ['系统通知', '实习招聘', '实践项目', '留言板', '其他']
      }
    },
    created() {
      this.getList()
    },
    mounted() {
      // this.dragSort();
    },
    methods: {
      resetSearch() {
        this.searchParams = {}
        this.sortingFields = null
        this.$refs.tableList && this.$refs.tableList.$children[0].clearSort()
        this.handleSearch()
      },
      async handleSort() {
        const { code, data } = await getMsgTypeList({
          pageNo: 1,
          pageSize: 999
        })
        if (code === 0) {
          this.$refs.dragSort && this.$refs.dragSort.open({
            list: data.list
          })
        }
      },
      transferSearchParams(params) {
        this.searchParams = params
      },
      handleSearch() {
        this.pageNo = 1
        this.getList()
      },
      async getList() {
        const params = {}
        for (const key in this.searchParams) {
          if (this.searchParams[key] || this.searchParams[key] === 0) {
            params[key] = this.searchParams[key]
          }
        }
        const { code, data } = await getTableList({
          ...params,
          sortField: this.sortingFields ? this.sortingFields[0] : null,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        })
        if (code === 0) {
          this.tableData = data.list.map(v => {
            return {
              ...v,
              createTimeStr: formatDate(v.createTime),
              updateTimeStr: formatDate(v.updateTime),
              statusStr: v.status ===1 ? '上架' : '下架',
            }
          })
          this.total = data.total
        } else {
          this.tableData = []
          this.total = []
        }
      },
      handleSelectionChange(val) {
        this.tableSelectList = val
      },
      handleChangePage({ pageNo, pageSize }) {
        this.pageNo = pageNo
        this.pageSize = pageSize
        this.getList()
      },
      // 新建
      handleAdd() {
        this.$refs.addTypePop && this.$refs.addTypePop.open({ popType: 'add' })
      },
      async handleSort() {
        const { code, data } = await getTableList({
          pageNo: 1,
          pageSize: 100
        });
        if (code === 0 && data && data.list && data.list.length > 0) {
          this.$refs.dragSort && this.$refs.dragSort.open({list: data.list});
        } else {
          console.log('无可排序类型');
        }
      },
      // 不发布
      // 暂停发布
      async handleOperatePush(row, status) {
        const mark = status === 0 ? '下架' : '上架'
        this.$confirm(`是否确认${mark}?`, '提示').then(async() => {
          const { code } = await editAPI({
            id: row.id,
            status,
            name: row.name
          })
          if (code !== 0) return
          this.$message.success('操作成功')
          this.getList()
        })
      },
  
      handleEdit(row) {
        this.$refs.addTypePop && this.$refs.addTypePop.open({ popType: 'edit', row: JSON.stringify(row) })
      },
      handleDelete({ id }) {
        this.$confirm('是否确认删除?', '提示').then(async() => {
          const { code, msg } = await deleteAPI(id)
          if (code !== 0) {
            this.$message.error(msg)
            return
          }
          this.$message.success('删除成功')
          this.getList()
        })
      },
      confirmDelete() {
        this.$message.success('删除成功')
      },
      sortChange(sortingFields) {
        const newFields = sortingFields ? sortingFields.map(v => {
        return {
            ...v,
            field: 't.' + v.field,
            }
        }) : null;
        this.sortingFields = newFields;
        this.handleSearch()
      }
    },
    mounted() {
        this.handleSearch();
    }
  }
  </script>
  
  <style lang='scss' scoped>
      .header {
          display: flex;
          flex-direction: column;
          padding: 0 20px;
  
          .search-tools {
              display: flex;
              justify-content: space-between;
              margin-top: 10px;
          }
  
          .btn-box {
              display: flex;
              justify-content: flex-start;
              align-items: center;
  
              .btns {
                  color: #02A7F0;
                  cursor: pointer;
                  display: inline-block;
                  width: 33.33%
              }
              .delete {
                  color: #f56c6c;
              }
          }
      }
  </style>
  <style lang="scss">
    .projectTypeList-yunying {
      .basic-table {
        .el-table__body-wrapper {
          height: calc(100vh - 225px);
        }
      }
      .basic-table::before {
        height: 0;
      }

      .pagination-container {
        padding: 0 !important;
      }
    }
  </style>
  